<template>
  <div>
    <el-dialog title="请指派" :visible.sync="close" width="30%" :before-close="handleClose">
      <div class="card-zp">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选择部门</span>
          </div>
          <div class="tree-div">
            <el-tree
              :data="options"
              show-checkbox
              node-key="index"
              check-strictly
              :props="{children: 'children',label: 'label'}"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
        <el-card class="box-card" style="margin-left:20px;">
          <div slot="header" class="clearfix">
            <div class="flot-r">
              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            </div>
          </div>
          <div class="">
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in user_list" :key="city" :label="city">{{ city }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-card>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">完 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {
    close: {
      type: Boolean,
      default: () => false
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ids: '',
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      user_list: ['上海', '北京', '广州', '深圳']
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.user_list : []
      this.isIndeterminate = false
    },
    handleClose(done) {
      this.$emit('update:close', false)
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.user_list.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.user_list.length
    },
    handleNodeClick(data, checked, indeterminate) {
      if (checked === true) {
        this.ids = data.id
        this.$refs.tree.setCheckedKeys([data.id])
        this.$store.dispatch('request/listOrgUser', data.id).then(res => {
          this.user_list = res.data.list
        })
      } else {
        if (this.ids === data.id) {
          this.$refs.tree.setCheckedKeys([data.id])
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.card-zp {
  display: flex;
  justify-content:flex-start;
  .box-card{
      flex: 1;
      min-width: 220px;
  }
  .clearfix{
      margin: -10px;
  }
  .tree-div {
    height: 320px;
    overflow-y: auto;
  }
}
</style>

